<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/views1/DTD/views1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.prime.com.tr/ui">
	<ui:composition template="/views/layout/main.xhtml">
		<ui:define name="conteudo">
			<style>
				td{
					padding: 10px;
				}
				.codigoQuestao{
					width: 97.3%;
					padding: 5px;
					margin-top: -5px;
				}
				.descricaoQuestao{
					width: 97.3%;
					padding: 5px;
				}
				.alternativasQuestao{
					width: 99%;
					padding: 5px;
					background-color: lightgray;
				}
			</style>
			<h:form id="formPrincipal">
				<div class="grid_2">
					<p:commandButton ajax="false" action="#{realizarProvaBean.voltarRealizarProva}" value="Sair" immediate="true"/>
				</div>
				<div class="grid_6">
					<p>
						<h:outputText value="Disciplina: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.disciplina.nome}"/>
					</p>
					<p>
						<h:outputText value="Professor: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.professor.nomeCompleto}"/>
					</p>
					<p>
						<h:outputText value="Ano/Semestre: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.ano}">
							<f:convertDateTime pattern="yyyy"/>
						</h:outputText>
						<h:outputText value="/"/>
						<h:outputText value="#{realizarProvaBean.provaInstance.aplicadaEm.semestre}"/>
					</p>
				</div>
				<div class="grid_5">
					<p>
						<h:outputText value="Número de Questões: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoes}"/>
					</p>
					<p>
						<h:outputText value="Questões Respondidas: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoesRespondidas}"/>
					</p>
					<p>
						<h:outputText value="Questões em Branco: "/>
						<h:outputText value="#{realizarProvaBean.numeroQuestoesBranco}"/>
					</p>
				</div>
				<div class="grid_5">
					<p>
						<h:outputText value="Início: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.dataHoraInicio}">
							<f:convertDateTime pattern="HH:mm - dd/MMM/yy"/>
						</h:outputText>
					</p>
					<p>
						<h:outputText value="Término: "/>
						<h:outputText value="#{realizarProvaBean.provaInstance.dataHoraFim}">
							<f:convertDateTime pattern="HH:mm - dd/MMM/yy"/>
						</h:outputText>
					</p>
					<div id="elemento">
						<h:inputHidden id="ano" value="#{realizarProvaBean.ano}"/>
						<h:inputHidden id="mes" value="#{realizarProvaBean.mes}"/>
						<h:inputHidden id="dia" value="#{realizarProvaBean.dia}"/>
						<h:inputHidden id="horas" value="#{realizarProvaBean.horas}"/>
						<h:inputHidden id="minutos" value="#{realizarProvaBean.minutos}"/>
					</div>
				</div>
				<div class="grid_18">
					<p:dataGrid var="model"
								value="#{realizarProvaBean.questaoList}"
								columns="1"
								rows="1"
								paginator="true"
								id="gridQuestoes"
								paginatorPosition="top"
								paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
								>
						<p:column>
							<div class="grid_18">
								<p class="ui-widget-header ui-corner-all codigoQuestao" style="text-align: left;">
									<h:outputText value="Questão: #{model.codigo}"/>
								</p>
								<p>
									<h:outputText escape="false" value="#{model.cabecalho}"/>
								</p>
								<p:spacer height="5px"/>
								<p>
									<p:dataTable selection="#{realizarProvaBean.alternativaMarcada}" 
												 selectionMode="single" 
												 value="#{model.alternativas}" 
												 var="alternativa" 
												 update="formPrincipal"
												 style="width: 99%;">
										<p:column headerText="Alternativas">
											#{alternativa.texto}
										</p:column>
										<p:column style="width: 50px;height: 0px;">
											<h:outputText rendered="#{model.alternativaEscolhida.id == alternativa.id}" value="Escolhida"/>
										</p:column>
									</p:dataTable>
								</p>
							</div>
						</p:column>
						
					</p:dataGrid>
				</div>
			</h:form>
			<script type="text/javascript">
				function atualizaContador(YY,MM,DD,HH,MI,saida) {
					var SS = 00;
					var hoje = new Date();
					var futuro = new Date(YY,MM-1,DD,HH,MI,SS);
				
					var ss = parseInt((futuro - hoje) / 1000);
					var mm = parseInt(ss / 60);
					var hh = parseInt(mm / 60);
					var dd = parseInt(hh / 24);
				
					ss = ss - (mm * 60);
					mm = mm - (hh * 60);
					hh = hh - (dd * 24);
				
					var faltam = 'Faltam: ';
					if(dd != null){
						if(dd > 1){
							faltam += dd+' dias, ';
						}else{
							if(dd==1){
								faltam += '1 dia, ';
							}else{
								faltam += '';
							}
						}
					}else{
						faltam += '';
					}
					if(hh==9 || hh==8 || hh==7 || hh==6 || hh==5 || hh==4 || hh==3 || hh==2 || hh==1 || hh==0){
						faltam += '0';
					}
					faltam += (toString(hh).length) ? hh+':' : '';
					if(mm==9 || mm==8 || mm==7 || mm==6 || mm==5 || mm==4 || mm==3 || mm==2 || mm==1 || mm==0){
						faltam += '0';
					}
					faltam += (toString(mm).length) ? mm+':' : '';
					if(ss==9 || ss==8 || ss==7 || ss==6 || ss==5 || ss==4 || ss==3 || ss==2 || ss==1 || ss==0){
						faltam += '0';
					}
					faltam += ss;
					if (dd+hh+mm+ss > 0) {
						document.getElementById(saida).innerHTML = faltam;
						setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);
					} else {
						document.getElementById(saida).innerHTML = '';
						setTimeout(function(){atualizaContador(YY,MM,DD,HH,MI,saida)},1000);
					}
				}
				
				window.onload=function(){
					atualizaContador(document.getElementById("formPrincipal:ano").value,document.getElementById("formPrincipal:mes").value,document.getElementById("formPrincipal:dia").value,document.getElementById("formPrincipal:horas").value,document.getElementById("formPrincipal:minutos").value,'elemento');
				}
			</script>
		</ui:define>
	</ui:composition>
</f:view>